<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/layout.css" />
    <link rel="stylesheet" type="text/css" href="../css/container.css" />
    <link rel="stylesheet" type="text/css" href="../css/component/button.css" />
    <style>
    	html,body{
            width: 100%;
            height: 100%;
            background: transparent;
    	}
        #wrap{
            width: 100%;
            height: 100%;
        }
        .menu-container{
            position: absolute;
            bottom: 58px;
            right: 15px;
            width: 168px;
            height: 163px;
            background-color: #fff;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0px 2px 0 rgba(0, 0, 0, 0.12);
            border-radius: 1px;
            -webkit-transition: all .1s;
            transition:all .1s;
            -webkit-transform: scale(0);
            transform:scale(0);
            opacity: 0;
        } 
        .menu-container.in{
            -webkit-transform: scale(1);
            transform:scale(1);
            opacity: 1;
        }
        .menu-container > ul{
            margin-top: 8px;
            margin-bottom: 8px;
        }  
        .menu-container > ul > .list{
            position: relative;
            display: inline-block;
            width: 152px;
            padding-left: 16px;
            height: 48px;
            line-height: 48px;
        }
        .menu-container > ul > li > h4{
            position: absolute;
            left: 52px;
            margin: 0px;
            height: 48px;
            line-height: 48px;
        }
        .menuImg{
            position: absolute;
            top: 14px;
            left: 16px;
            width: 20px;
        }
        .divider {
            display: block;
            width: 168px;
            height: 1px;
            background-color: rgba(0, 0, 0, 0.12);
            margin-top: -5px;
        }
        .listActive{
            background-color: rgba(0, 0, 0, 0.12);
        }

        /**/
        .wrap2{
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        .wrap2{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
            /* Firefox */
            display:-moz-box; 
            -moz-box-orient: vertical;
            -moz-flex-flow: column;
            /* 正式环境可去 */
        }
        #main{
            -webkit-box-flex: 1; 
            -webkit-flex: 1;
            /* Firefox */
            -moz-box-flex: 1;
            -moz-flex: 1; 
        }
        #main{
            padding-top: 30px;
            padding-bottom: 8px;
            padding-left: 15px;
            padding-right: 15px;
            background-color: #fff;
            height: 100%;
        }
        #footer{
            height: 48px;
        }
        #footer > .in-container > .in-col-1{
            padding-left: 6px;
            padding-right: 3px;
        }
        #footer > .in-container > .in-col-1 > button{
            width: 100%;
        }
        .tabActive{
            background-color: #42A5F5;
        }
        textarea{
            border: 0px;
            resize: none;
            overflow-x: hidden; 
        }
        .form-control{
            width: 100%;
            border: 0px;
            font-size: 20px;
        }
        textarea:focus,
        textarea:active{
            outline: none;
        }
        .btn{
            min-width: 50px;
            height: 50px;
            background-color: rgba(0,0,0,.5);
        }
        /**/
        .hide{
            -webkit-transition: all .1s;
            transition:all .1s;
            -webkit-transform: scale(0);
            transform:scale(0);
            opacity: 0;
        }
        .show{
            -webkit-transform: scale(1);
            transform:scale(1);
            opacity: 1;
        }
        .over{
            display: none;
        }
    </style>
</head>
<body>
        <div class="menu-container" id="menu">
            <ul>
                <li class="list" tapmode="listActive" onclick="openEdit()">
                    <img class="menuImg" src="../image/png/create.png"><h4>立即写下</h4>
                </li>
                <li class="divider"></li>
                <li class="list" tapmode="listActive" onclick="openWebpage( '2' )">
                    <img class="menuImg" src="../image/png/camera.png"><h4>拍照</h4>
                </li>
                <li class="divider"></li>
                <li class="list" tapmode="listActive" onclick="openWebpage( '3' )">
                    <img class="menuImg" src="../image/png/voice.png"><h4>录音记事</h4>
                </li>
                <!-- <li class="divider"></li> -->
                <!-- <li class="list" tapmode="listActive" onclick="openWebpage( '4' )">
                    <img class="menuImg" src="../image/png/people.png"><h4>我的 Team</h4>
                </li> -->
            </ul>
        </div>

        <div id="wrap" class="wrap2 hide">
            <div id="main">
                <textarea id="textarea1" class="form-control" placeholder="点击这里，记录发生的事情" autofocus></textarea>
            </div>
            <div id="footer">
                <div class="in-container">
                    <div class="in-col-1">
                        <button class="mui-btn mui-btn--primary" onclick="closeThisMenu()">取消</button>
                    </div>
                    <div class="in-col-1">
                        <button class="mui-btn mui-btn--primary" onclick="InsertNewWord()">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹出edit -->
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
	apiready = function(){
		var menu_container = $api.dom('.menu-container');
        $api.addCls(menu_container, 'in');
        // edit初始
        var mainH = api.frameHeight - 16 - 25;
        $api.css(document.getElementById('textarea1'), 'height: '+mainH+'px;');
        // homegage中被keyback事件收到
        api.sendEvent({
            name: 'menuOpened'
        });
	};
    // =============================================
    // 添加frame被打开的事件
    function sendEvent() {
        api.sendEvent({
            name: 'menuClosed'
        });
    };

    // =============================================
    // 打开webpage.html
    function openWebpage( index ) {
        switch (index)
        {
            case '1' :
                openWindow('edit', '随笔');
            break;
            case '2' :
                openCamera();
            break;
            case '3' :
                openMic();
            break;
            case '4' :
                openWindow('team', '我的 Team');
            break;
            default:
            break;
        }
    };

    function openWindow(name, pagename) {
        setTimeout(function(){
            sendEvent();
            api.closeFrame();
        },200);
        api.openWin({
            name: 'webpage',
            url: 'webpage.html',
            pageParam: {
                name: name,
                pagename: pagename
            },
            animation: {
                type: 'fade',
                // subType: 'from_right',
                duration: 200   
            }
        });
    };

    function openMic() {
        setTimeout(function(){
            sendEvent();
            api.closeFrame();
        },200);
        api.openWin({
            name: 'recording',
            url: 'recording.html',
            animation: {
                type: 'fade',
                // subType: 'from_right',
                duration: 200   
            }
        });
    };
    function appendZero(s){return ("00"+ s).substr((s+"").length);}  //补0函数
    function openCamera(){
        
        var  imageFilter = api.require("imageFilter");
        // 压缩图片的命名方法：i + 当前时间戳 + .jpg
        var timestamp = (new Date()).valueOf().toString();
        var imgName = 'i' + timestamp + '.jpg';
        api.getPicture({
            sourceType: 'camera',
            encodingType: 'jpg',
            mediaValue: 'pic',
            destinationType: 'url',
            allowEdit: true,
            quality: 100,
            saveToPhotoAlbum: true
        }, function( ret, err ){ 
            if( ret ){
                // alert( JSON.stringify( ret ) );
                var imageSrc = ret.data;
                
                imageFilter.compress({
                    img: imageSrc,
                    quality: 0.1,
                    scale: 0.5,
                    save: {
                        album: false,
                        imgPath: "fs://photos/",
                        imgName: imgName
                    }
                }, function(ret, err){
                    // alert(JSON.stringify(ret) + JSON.stringify(err));
                    var d = new Date();
                    var allTime = d.getFullYear() + "-" + appendZero(d.getMonth() + 1) + "-" + appendZero(d.getDate());
                    var detail = imageSrc+','+imgName+','+allTime.toString();

                    insertNewImg(detail);
                });
            }
        });
    };
    // =============================================
    // 监听菜单以外的touch事件，退出frame 
    // 事件openTheMenu
    openTouchEvent();
    function openTouchEvent() {
        $(document.body).on('touchend',function(e) {
            var menu = document.getElementById('menu');
            if(!$.contains(menu, e.target)){
                $('#menu').removeClass('in');
                sendEvent();
                setTimeout(function(){
                    api.closeFrame();
                },200);
            }
        });
    };
    
    // =============================================
    // 打开edit页面
    function openEdit() {

        // 隐藏菜单，打开edit
        var menu = $api.dom('#menu');
        var wrap2 = $api.dom('.wrap2');
        $api.addCls(menu, 'over');
        $api.addCls(wrap2, 'show');
        $(document.body).off('touchend');
        // 修改frame的背景
        api.setFrameAttr({
            name: api.frameName,
            bounces: false,
            bgColor: '#fff'
        });
        document.getElementById('textarea1').focus();
    };

    // =============================================
    // 写入新的数据
    function InsertNewWord() {
        // alert("ok");
        var db = api.require('db');
        var detail = document.getElementById('textarea1').value;
        db.openDatabase({
            name: 'inote',
            path: 'fs://inote.db'
        }, function(ret, err){
            if(ret.status){
                // 相关的操作放在这里
                insert(detail);
                closeDatabase();
            }
        });
    };
    function insertNewImg(detail) {
        var db = api.require('db');
        db.openDatabase({
            name: 'inote',
            path: 'fs://inote.db'
        }, function(ret, err){
            if(ret.status){
                // 相关的操作放在这里
                insertImg(detail);
                closeDatabase();
            }
        });
    };
    function closeDatabase() {
        var db = api.require('db');
        db.closeDatabase({
            name:'inote'
        }, function(ret, err){
            if(ret.status){
                // api.alert({msg:'关闭数据库成功'});
            }else{
                api.alert({msg:'error'});
            }
        });      
    };
    function executeSql(sql) {
        var db = api.require('db');
        db.executeSql({
            name: 'inote',
            sql: sql
        }, function(ret, err){
            if(ret.status){
                closeMenu();
            }else{
                api.alert({msg:err.msg});
            }
        });
    };
    function insert(detail) {
        var sql = "INSERT INTO Text (type, detail) VALUES ('1', '"+detail+"')";
        executeSql(sql);
    };
    function insertImg(detail) {
        var sql = "INSERT INTO Text (type, detail) VALUES ('2', '"+detail+"')";
        executeSql(sql);
    };
    function closeMenu() {
        api.sendEvent({name: 'reloadMemorandum'});
        // setTimeout(function(){
            api.closeFrame();
        // }, 1000);
    };
    function closeThisMenu() {
        setTimeout(function(){
            api.closeFrame();
        },200);
    };
</script>
</html>